<template>
	<view class="user-center">
		<!-- 未登录界面 -->
		<view v-if="!hasLogin" class="not-login-wrapper" :style="{'height':canUseHeight+'px'}">
			<view class="not-login">
				<button type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo">
					<image src="../../static/wechat.png" class="wechat"></image>
					微信一键登录
				</button>
			</view>
		</view>
		
		<!-- 已登录界面:用户资料 -->
		<view class="user-data" v-else>
			<!-- 头像昵称 -->
			<view class="head-nic">
				<view class="head">
					<!-- <image src="" mode="aspectFill"></image> -->
				</view>
				<view class="nic">
					nic
				</view>
			</view>
			
			<!-- 公开文章 -->
			<view class="my-article">
				<!-- <image src=""></image> -->
				我的公开文章
			</view>
			
			<!-- 阅读记录 -->
			<view class="read-record">
				<!-- <image src="" mode=""></image> -->
				最近阅读记录
			</view>
			
			<!-- 喜欢文章 -->
			<view class="like-article">
				<!-- <image src="" mode=""></image> -->
				喜欢文章
			</view>
			<button type="primary" class="write-artcile" @click="toWrite">+ 写文章</button>
		</view>
		
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { mapMutations } from 'vuex'
	import { mapActions } from 'vuex'
	
	export default {
		data() {
			return {
				canUseHeight:''
			}
		},
		methods: {
			...mapMutations(['getUserInfo','setUserId']),
			...mapActions(['registeUser','getUserId']),
			async getuserinfo(res){
				let _this = this;
				this.getUserInfo(res.detail.userInfo)
				try{
					await this.getUserId(); //获取已注册用户id
					await this.registeUser(); //用户注册
				}catch(e){
					console.log('注册用户或者获取用户错误：',e);
				}
			},
			toWrite(){
				uni.navigateTo({
					url:'../write/write',
					animationType:'pop-in'
				})
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
		onShow: function() {
			let _this = this;
		    uni.getSystemInfo({
		    	success(res) {
		    		_this.canUseHeight = res.windowHeight;
		    	}
		    })
		},
	}
</script>

<style>
	.not-login-wrapper {
		width: 100%;
		position: relative;
		background: url('https://images.pexels.com/photos/745760/pexels-photo-745760.jpeg?cs=srgb&dl=pexels-jess-bailey-designs-745760.jpg&fm=jpg') no-repeat;
		background-size: cover;
		background-position: center;
	}
	.not-login {
		width: 80%;
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.wechat {
		margin-right: 20rpx;
		vertical-align: middle;
		width: 50rpx;
		height: 50rpx;
	}
	.write-artcile {
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 35%;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
		letter-spacing: 6rpx;
		font-family: '楷体';
		font-weight: 600;
		background-color: #aa983e;
		box-shadow: 0 0 5px #666;
	}
</style>
